<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .iconfont {
            font-size: .32rem;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        header {
            height: 1.95rem;
            background-color: #eee;
            flex-shrink: 0;
        }

        header h2 {
            display: flex;
            justify-content: space-between;
            line-height: .8rem;
            font-size: .34rem;
            font-weight: normal;
            padding: 0 .26rem;
        }
        header h2 i {
            width: 0.4rem;
        }

        .search {
            width: 7rem;
            height: 0.7rem;
            margin: auto;
            background-color: #ff0;
            border-radius: .1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #999;
        }

        .search i {
            margin-right: .1rem;
        }

        main {
            flex-grow: 1;
            overflow: hidden;
            background-color: #ddd;
            display: flex;
        }

        footer {
            height: 0.96rem;
            background-color: #eee;
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }

        footer a {
            width: 20%;
            text-align: center;
            line-height: .3rem;
        }

        footer .cur {
            color: red;
        }

        nav {
            width: 1.8rem;
            overflow-y: scroll;
            flex-shrink: 0;
            line-height: 1rem;
            text-align: center;
        }

        nav li {
            border-left: 3px solid rgba(0, 0, 0, 0);
        }

        nav .cur {
            border-left-color: red;
            color: red;
        }

        section {
            flex-grow: 1;
            overflow-y: scroll;
        }

        section h3 {
            display: flex;
            justify-content: space-between;
            padding: 0 .23rem;
            line-height: .9rem;
            font-weight: normal;

        }

        section h3 img {
            width: 1.29rem;
            margin-left: 0.2rem;
        }

        section h3 span {
            display: flex;
            align-items: center;
        }

        .banner {
            width: 94%;
            margin-left: 3%;
        }

        section ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: .2rem;
        }

        section ul li {
            width: 32%;
            text-align: center;
        }

        section ul li img {
            width: 60%;
        }
    </style>
</head>

<body>

    <header>
        <h2>
            <i></i>
            <span>搜索</span>
            <i>图</i>
        </h2>
        <a href="" class="search">
            <i>图</i>
            <span>眉笔防水</span>
        </a>
    </header>
    <main>
        <nav>
            <ul>
                <li class="cur">
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
                <li>
                    <a href="">homw</a>
                </li>
            </ul>
        </nav>
        <section>
            <h3>
                <span>百货 <img src="../images/分类_03.jpg" alt=""></span>
                <a href="">查看全部 <i>图</i></a>
            </h3>
            <img class="banner" src="../images/分类_03.jpg" alt="">
            <ul>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../images/jay.jpg" alt="">
                        <p>创房如此</p>
                    </a>
                </li>

            </ul>
        </section>
    </main>
    <footer>
        <a href="" class="cur">
            <i class="iconfont">tu</i>
            <p>首页</p>
        </a>
        <a href="">
            <i class="iconfont">tu</i>
            <p>首页</p>
        </a>
        <a href="">
            <i class="iconfont">tu</i>
            <p>首页</p>
        </a>
        <a href="">
            <i class="iconfont">tu</i>
            <p>首页</p>
        </a>
        <a href="">
            <i class="iconfont">tu</i>
            <p>首页</p>
        </a>
    </footer>

</body>

</html>